<template>
	<view>
		<view class="top">
			<view class="topBar">
				<view v-if="this.isEdit === true" class="top-left" @tap="cancel">取消</view>
				<view v-else class="top-left" @tap="returnTo" style="font-size: 30px;"><</view>
				<view class="top-center">nfc管理</view>
				<view v-if="this.isEdit === false" class="top-edit" @tap="toEdit">编辑</view>
				<view v-else class="top-edit" @tap="saveEdit">保存</view>
			</view>
		</view>
		<view style="height: 75px;"></view>
		<view class="nfc-body">
			<view class="nfc-view" v-for="(nfc , index) in nfcList" :key="index">
				<view class="left">
					<view class="nfc-name" v-if="this.isEdit === false">{{nfc.nfcName}}</view>
					<input v-else class="nfc-name" v-model="nfc.nfcName" @input="onNfcNameChange(index)"></input>
				</view>
				<button v-if="this.isEdit === true" class="edit-btn" type="warn" @tap="deleteNfc(nfc)">删除</button>
			</view>
		</view>
		<view class="addNfc" @tap="addNfc">添加NFC</view>
		<view :class="{ darkBackground: isShow }">
			<view v-if="this.isShow === true" class="addNFC">
				<view class="nfc-title">新建NFC</view>
				<view class="nfcBody">
					<view class="nfc-name1">
						<view style="width: 30%;">名称: </view>
						<input placeholder="请填写nfc名称" class="nameInput" v-model="newNfcName" />
					</view>
					<button class="toNFC" type="primary" @tap="toNFC" style="margin-top: 70px;">录入NFC</button>
					<button class="toNFC" type="primary" @tap="exit">取消</button>
				</view>
			</view>
		</view>
	</view>

</template>

<script>
	import request from "../../common/request.js"
	import nfc from "@/common/nfc.js"
	export default {
		data() {
			return {
				isEdit: false,
				isShow: false,
				nfcList: [],
				newNfcName: '',
				modifiedIndices: new Set(),
				fromPointCreate: false,
			}
		},
		onLoad(option) {
			const showForm = option.isShow
			this.getNFCManage()
			console.log(showForm)
			console.log("999isShow="+this.isShow)
			if(showForm === "true"){
				this.isShow = true
				this.fromPointCreate = true
			}
			console.log("666isShow="+this.isShow)
		},
		methods: {
			toEdit() {
				this.isEdit = true
			},
			saveEdit() {
				this.isEdit = false
			},
			cancel() {
				this.isEdit = false
			},
			deleteNfc(nfc) {
				uni.showModal({
					content: "确定要删除该nfc吗，此操作不可删除！",
					success: (res) => {
						if (res.confirm) {
							console.log("删除nfc")
							request(`/NFC/${nfc.nfcMsg}`, 'DELETE').then(res => {
								console.log(res)
								this.nfcList = this.nfcList.filter(item => item.nfcMsg !== nfc.nfcMsg);
							})
						}
					}
				})
			},
			returnTo() {
				uni.navigateBack()
			},
			addNfc() {
				this.isShow = true
			},
			exit() {
				if(this.fromPointCreate){
					uni.navigateBack()
					this.fromPointCreate = false
				}else{
					this.isShow = false
				}
			},
			async toNFC() {
				//这里用异步获取读取到的NFC数据
				nfc.listenNFCStatus()
				await nfc.readData()
				setTimeout(() => {
					console.log("nfc=" + nfc.readResult)
					if(nfc.readResult !== ""){
						request('/NFC', 'POST', {
							nfcMsg: nfc.readResult,
							nfcName: this.newNfcName
						}).then(res => {
							console.log(res)
							this.nfcList.push({
								nfcMsg: nfc.readResult,
								nfcName: this.newNfcName
							})
						})
						//添加nfc
						if(this.fromPointCreate){
							uni.navigateBack()
							this.fromPointCreate = false
						}else{
							this.isEdit = false
							this.isShow = false
						}
						
					}else{
						uni.showToast({
							title:"添加nfc失败，请重试",
							icon:'none',
						})
					}
					
				}, 2000)

			},
			getNFCManage() {
				request('/NFC').then(res => {
					console.log(res)
					this.nfcList = res.data.data
				})
			},

			onNfcNameChange(index) {
				// 将被修改组件的索引添加到 Set 中
				this.modifiedIndices.add(index)
			},
			submitChanges() {
				const updatedNfcList = this.nfcList.map((nfc, index) => {
					// 如果该组件被修改过，则返回修改后的数据
					if (this.modifiedIndices.has(index)) {
						return {
							...nfc, // 保留其他属性
							nfcName: nfc.nfcName // 使用修改后的 nfcName
						};
					}
					return nfc; // 否则返回原始数据
				});

				// 将 updatedNfcList 提交到后端或进行其他处理
				console.log('提交的数据：', updatedNfcList)

				// 清空 modifiedIndices
				this.modifiedIndices.clear()
			}
		}
	}
</script>

<style scoped>
	.top {
		position: fixed;
		width: 100%;
		height: 75px;
		color: #fff;
	}

	.topBar {
		background-color: #0A60BD;
		display: flex;
		align-items: center;
		padding: 10px;
		padding-top: 25px;
	}

	.top-left {
		width: 10%;
	}

	.top-center {
		font-size: 30px;
		text-align: center;
		width: 80%;
	}

	.top-edit {
		width: 10%;
		display: flex;
		align-items: end;
	}
	.nfc-body{
		max-height: 80vh;
		overflow-y: auto;
		display: flex;
		flex-direction: column;
		align-items: center;
	}
	.nfc-view {
		display: flex;
		margin-top: 20px;
		background-color: #fff;
		height: 60px;
		align-items: center;
		padding: 20px;
		width: 85%;
		border-radius: 25px;
	}

	.left {
		width: 80%;
		margin-left: 5px;
	}

	.nfc-name {
		font-size: 28px;
	}

	.nfc-date {
		margin-top: 8px;
		margin-left: 20px;
	}

	.edit-btn {
		border-radius: 10px;
		font-size: 15px;

	}

	.addNfc {
		font-size: 28px;
		text-align: center;
		align-items: center;
		width: 90%;
		display: flex;
		justify-content: center;
		margin-left: 5%;
		background-color: #0A60BD;
		color: #fff;
		height: 50px;
		margin-top: 20px;
		margin-bottom: 5px;
		border-radius: 20px;
	}

	.addNFC {
		width: 80%;
		height: 50%;
		background-color: #fff;
		position: fixed;
		left: 10%;
		top: 20%;
		z-index: 2;
		display: flex;
		flex-direction: column;
	}

	.nfc-title {
		font-size: 30px;
		text-align: center;
		padding: 25px;
	}

	.nfcBody {
		padding: 20px;
	}

	.nfc-name1 {
		display: flex;
		font-size: 20px;
		
	}

	.nameInput {
		align-self: center;
		background-color: #f5f5f5;
		font-size: 20px;
		margin-left: 5px;
	}

	.toNFC {
		margin-top: 20px;
	}

	.darkBackground {
		background-color: rgba(0, 0, 0, 0.5);
		/* 设置暗色背景 */
		position: fixed;
		/* 使背景覆盖整个视口 */
		top: 0;
		left: 0;
		right: 0;
		bottom: 0;
		z-index: 1;
		/* 确保在其他元素之上 */
	}
</style>